<template>
	<div id="app">

		<div :class="token !== '' ? 'appactive' :'dhzn_app'">
			<!-- 登录-->
			<el-form :model="login" :rules="rules" v-if=" token === ''" ref="login" label-width="50px" class="d_a-form">
				<h2 class="mt10 mb30">鼎合智农会员登录</h2>
				<el-form-item label="" prop="uname" class="d_a-f-item bcwh">
					<label slot="label"><i class="iconfont f24 g6 icon-ren"></i></label>
					<el-input v-model="login.uname" placeholder="账号" clearable></el-input>
				</el-form-item>

				<el-form-item label="" prop="pwd" class="d_a-f-item bcwh">
					<label slot="label"><i class="iconfont f24 g6 icon-mima"></i></label>
					<el-input v-model="login.pwd" placeholder="密码" show-password type='password' clearable></el-input>
				</el-form-item>

				<!-- <el-form-item label="" class="d_a-f-item bg00"> -->
					<!-- <label slot="label"><i class="iconfont wh f24 icon-suo"></i></label> -->
					<button type="button" class="wh f18" @click="submitForm('login')">登录</button>
				<!-- </el-form-item> -->
			</el-form>

			<div class="dh_a-homepage" v-else>

				<!-- 后台数据 -->
        		<div class="dh_a-h-content">
            
					<!-- 侧边导航栏 -->
					<div class="dh_ahc-navigation">
						<!-- $route.path   :default-active="activeIndex"-->
						<el-menu router :default-active="routepath" @select="handleSelect" class="f14 el-menu-vertical-demo" :collapse="isCollapse" background-color="#000000" :unique-opened="true">

							<el-menu-item disabled>
								<i class="dh_ahcn-icon iconfont icon-guangai f24"></i>
								<span slot="title" class="f20">鼎合智农</span>
							</el-menu-item>
							<!-- 商家管理 -->
							<el-menu-item index="/home">
								<i class="el-icon-s-home"></i><span slot="title" class="ws24">首 页</span>
							</el-menu-item>
							<!-- <el-menu-item index="/shops" @click="navBar">
								<i class="el-icon-s-shop"></i><span slot="title">商家管理</span>
							</el-menu-item>	 -->
							<!-- 商品分类 -->
							<el-menu-item index="/classifysort" @click="navBar">
								<i class="el-icon-s-goods"></i><span slot="title" class="ws4">商品分类</span>
							</el-menu-item>	
							<!-- 优惠券 -->
							<!-- <el-menu-item index="/farmer" @click="navBar">
								<i class="dh_ahcn-icon iconfont icon-nonghu"></i><span slot="title">农户管理</span>
							</el-menu-item>	-->
							<!-- 物流信息 -->
							<!-- <el-menu-item index="/logistics" @click="navBar">
								<i class="el-icon-truck"></i><span slot="title">物流信息</span>
							</el-menu-item> -->
							<!-- 用户管理 -->
							<el-menu-item index="/users" @click="navBar">
								<i class="el-icon-user-solid"></i><span slot="title">用户管理</span>
							</el-menu-item>
							<!-- 商品大类 -->
							<el-menu-item index="/goods">
								<i class="el-icon-shopping-cart-1" ></i><span slot="title" class="ws24">商 品</span>
							</el-menu-item>
							<!-- 角色管理 -->
							<el-menu-item index="/role">
								<i class="el-icon-s-custom"></i><span slot="title">角色管理</span>
							</el-menu-item>
							<!-- 店铺管理 -->
							<el-menu-item index="/store">
								<i class="el-icon-s-shop"></i><span slot="title">店铺管理</span>
							</el-menu-item>
							<!-- 店铺会员 -->
							<el-menu-item index='/shopvip'>
								<i class="dh_ahcn-icon f20 iconfont icon-vip"></i><span slot="title">店铺会员</span>
							</el-menu-item>
							<!-- 主页管理 -->
							<el-submenu index='/homepage' class="dh_ahcn-submen">
								<template slot="title"><i class="dh_ahcn-icon iconfont icon-homePage"></i><span slot="title">首页管理</span></template>
								<el-menu-item index='/homepage/image' class="f14 ws4">轮 播 图</el-menu-item>
								<el-menu-item index='/homepage/active' class="f14 ws26">活 动</el-menu-item>
								<el-menu-item index='/homepage/acgoods' class="f14">活动商品</el-menu-item>
							</el-submenu>
							<!-- 订单 -->
							<el-submenu index="/indent">
								<template slot="title"><i class="el-icon-s-order"></i><span slot="title">订单管理</span></template>
								<el-menu-item index='/indent/inhome' class="f14 ws4"><span slot="title">订单</span></el-menu-item>
								<el-menu-item index='/indent/inexpress' class="f14 ws4"><span slot="title">物流</span></el-menu-item>

							</el-submenu>
							<!-- 二级分类 -->
							<!-- <el-submenu index='goods'>
								<template slot="title"><i class="dh_ahcn-icon iconfont icon-shangpin1" ></i><span slot="title" class="ws24">商 品</span></template>
								<el-menu-item index='1'>轮播图</el-menu-item>
								<el-menu-item index='2' class="ws6">活 动</el-menu-item>
							</el-submenu> -->
						</el-menu>
						
					</div>

					<div class="dh_ahc-list">
						<div class="dh_ah-t-right">

							<el-radio-group v-model="isCollapse">
								<el-radio-button :label="fold" @change.native="fold = !fold"><i class='iconfont icon-hanbb'></i></el-radio-button>
							</el-radio-group>

							<h1>商户管理后台</h1><i title="点击退出登录" @click="secede" class="dh_aht-r-icon iconfont icon-tuichu2"></i>
						
						</div>
						<router-view class="p30"></router-view>
					</div>

        		</div>

			</div>

		</div>

	</div>
</template>

<script>
export default {
	components: {},
	data(){
		return{
			// 用户名密码的保存数组
			login:{uname:'',pwd:'',verify: false,fail:''},
			rules:{
				uname:[{required:true,message:'请输入登录账号',trigger:'blur'}],
				pwd:[{required:true,message:'请输入登录密码',trigger:'blur'}],
			},
			token:'',													//后台安全验证		
			typepwd: 'password', 										//输入密码的查看效果
			examinestate: false, 										//页面功能切换的显示(登录和数据页的切换)
			// 侧边导航栏的数组
			navioption:[
				{id:0,name:"商家管理",link: '/',icon:'icon-sanguohome',composing:'',son:''},
				{id:1,name:"商品分类",link: '/classifysort',icon:'icon-shangpin',composing:'',son:''},
				{id:2,name:"优 惠 券",link: '/coupon',icon:'icon-lingquan',composing:'ws4',son:''},
				{id:3,name:"物流信息",link: '/logistics',icon:'icon-wuliu',composing:'',son:''},
				{id:4,name:"用户管理",link:'/users',icon:'icon-yonghu',composing:'',son:''},
				{id:5,name:'商品',link: '/goods',son:[
					{id:0,name:'商品管理',link:'/users'}
				]},
				{id:6,name:"活动管理",link:'/activity',son:''}
			],
			isCollapse: true,
			timer: null,
			fold: false,
			// activeIndex: '/home',
			routeList:[]
		}
	},
	computed: {
		
        routepath() {
			// console.log(this.$route.meta.GuidePath ? this.$route.meta.JumpPath : this.$route)
            return this.$route.meta.GuidePath
                ? this.$route.meta.JumpPath
                : this.$route.path;
        }
    
	},
    watch: {
		// '$route' () {
		// 	this.handleSelect(this.activeIndex),
		// 	this.activeIndex = this.$route.matched[0].path || '/'
		// }
	},
	methods: {
		router() {
            this.routeList = this.$router.options.routes[
                this.$router.options.routes.length - 1
            ].children;
            console.log(this.$router);
            console.log(this.$router.options.routes);
            console.log(this.$router.options.routes[8].children);
            console.log(this.routeList);
        },
		// 输入密码时触发，显示查看密码的眼睛
		examine(){
			const that = this;
			that.examinestate = true;
		},
		
		// 查看密码的按钮（眼睛）
		checkpwd(){
			const that = this;
			if(that.typepwd === "password"){
				that.typepwd = "text";
			}else{
				that.typepwd = "password";
			}
		},

		//定时器
		refreshing(){
			let that = this;
			let axios = require("axios")
			// console.log('运行了')
			that.timer = setInterval(() => {
                setTimeout(()=>{
                    //console.log(i++)
					that.newtoken()
                },0)
            }, 1700000)
		},

		//刷新页面执行
		newtoken(){
			// console.log('运行了')
			let axios = require('axios')
			let loguser = JSON.parse(sessionStorage.getItem('updata'))
			let data = {username:loguser.username, password:loguser.password};
			let updata = JSON.stringify(data);
			console.log(updata)
			axios({
				method: 'post',
				url: '/api/getAuthority/manager',
				headers: { 'Content-Type': 'application/json' },
				data: updata
			})
			.then( resp=> {
				sessionStorage.setItem("token", JSON.stringify(resp.data.data))
			}).catch( err=> {})
		},

		// 退出登录状态
		secede(){
			window.location.pathname = '/'
			this.token = "";
			sessionStorage.removeItem("token")
			sessionStorage.removeItem('updata')
            clearInterval(this.timer)
		},

		// 侧边栏函数
        handleSelect(key, keyPath) {
			this.activeIndex = key
		},
        // 侧边栏函数
        navBar(){
            // console.log(this.navioption[1].name.length)
		},
		
		handleOpen(key, keyPath) {
        	console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},

		//运行的登陆函数
		submitForm(formName) {
			const that = this;
			let axios = require('axios')
			let captcha = new TencentCaptcha(
                "2074717047",
                rsp => {
                    console.log(rsp);
                    if (rsp.ret === 0) {
						//当ret是0得时候代表成功填写了验证码，我在里面进行了axios操作。
						this.isSuccess = true;
                        this.$message({
                            message: "验证不通过",
                            type: "success"
                        });
						this.$refs[formName].validate((valid) => {
							if (valid) {
								// alert('submit!');
								
								let data = {username:that.login.uname, password:that.login.pwd};
								let updata = JSON.stringify(data)
								console.log(updata)
								axios({
									method: 'post',
									url: '/api/getAuthority/manager',
									headers: { 'Content-Type': 'application/json' },
									data: updata
								})
								.then( resp=> {
									// console.log(resp)
									// 密码验证
									if(resp.data.data === "没有权限！"){
										that.$message.error("登录失败，请确认账号密码是否正确")
									}else{
										that.$message({message: '登录成功!',type: 'success'})
										that.token = resp.data.data;
										sessionStorage.setItem("token", JSON.stringify(that.token))
										sessionStorage.setItem("updata",JSON.stringify(data))
										that.refreshing()
									}
								})
								.catch( err=> {console.log(err)})

							} else {
								// console.log('error submit!!');
								this.$message.error('账号密码不能为空')
								return false;
							}
						});
                    } else {
                        this.isSuccess = false;
                        this.$message({
                            message: "验证不通过",
                            type: "warning"
                        });
                    }
                },
                {}
            );
            captcha.show();
      	},
	},
    created() {
		// this.router()
		let that = this;
        if(that.timer){
            clearInterval(that.timer)
        }else{
            if(sessionStorage.getItem('updata')){
				that.newtoken()
                that.refreshing()
            }else{return}
        }
		// // 刷星导航栏选中不重置
		// console.log('app',this.$route.path,this.$route.matched)
		// this.activeIndex = this.$route.matched[0].path || '/';
		// // that.activerouter = window.location.pathname;
        
		// 刷新登录状态不消失
		if(JSON.parse(sessionStorage.getItem("token"))){
			that.token = JSON.parse(sessionStorage.getItem("token"))
		}
		if(that.login.verify === true){
			window.addEventListener("beforeunload", ()=>{
				sessionStorage.setItem("token", JSON.stringify(that.token))
			})
		}else{return}
	},
    mounted() {
		
	},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
}
</script>

<style>
	.d_a-f-text>input:focus{   
		border:none;
	}

	#app {
		font-family: Helvetica, sans-serif;
	}

	a {
		color: #409EFF;
		/* padding: 0 10px; */
	}
	a .router-link-exact-active {
		color: #3273ff;
	}
	a:link {
		text-decoration: none;
	}

	.dhzn_app{
		display: flex;
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background: url(./assets/bgc.jpg) no-repeat 100% 100%;
		background-size: 100% 100%;
	}
	/* 登录 */
	.d_a-form{
			text-align: center;
			width: 300px;
			margin: auto;
			padding: 30px;
			background: linear-gradient(to bottom right,#ebebebe3 40%,#c4c4c4e1 70%);
			/* background-color: #e2e2e2bd; */
			border-radius: 10px;
			box-shadow: 0 0 5px #707070;
		}
		.d_g-form>h2{
			font-size: 20px;
			background: linear-gradient(to right,#536976 0%,#292E49 100%);
			-webkit-background-clip: text;
			color: transparent;
		}
		/* 重写的登录框 */
		.d_a-f-item{
			/* overflow: hidden; */
			height: 40px;
			margin-bottom: 30px;
			border-radius: 4px;
		}
		.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
			content: '';
		}
		.el-input__inner{
			/* border: 0; */
			border-radius: 0px;
		}
		.d_a-form button{
			width: 100%;
			padding: 10px;
			background-color: #434343;
			border-radius: 5px;
		}

	/* 主界面 */
	.dh_a-homepage{
		width: 100%;
		}	

		.dh_ah-t-right{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 56px;
			padding: 0 30px;
			font-size: 20px;
			border-bottom: 1px solid #383838;
			box-sizing: border-box;
		}
		.dh_aht-r-icon{
			font-size: 20px;
		}
		.dh_aht-r-icon:hover{
			color: red;
		}

		/* 内容的主体 */
		.dh_a-h-content{
			display: flex;
		}
		/* 侧边导航栏 */
		.dh_ahc-navigation{
			min-height: 100vh;
			background-color: #000000;
		}
		.el-menu-vertical-demo{
			background-color: rgba(255, 255, 255, 0);
		}

		.el-menu-vertical-demo:not(.el-menu--collapse) {
			width: 200px;
			min-height: 400px;
		}
		div.dh_ahc-navigation>ul.el-menu{
			/* text-align: center; */
			background-color: transparent;
			border-right: 0;
		}
		.dh_ahc-navigation .el-menu-item{
			font-size: 16px;
			color: #ffffff;
			border-left: 3px solid #000000;
		}
		/* 导航栏选中状态的固定 */
		div>.dh_ahc-navigation>ul.el-menu>.el-menu-item.is-active {
			background-color: #272727fa !important;
			color: #64b4ff;
			border-left: 3px solid #64b4ff;
		}
		li.el-menu-item:hover{
			background-color: transparent;
		}
		li.el-menu-item{
			font-size: 16px;
			color: #ffffff;
		}
		/* 在el-menu-item重定义的属性，直接在后面修改样式不生效，再次修改需要用自己选择器主机寻找才行 */
		div>.dh_ahc-navigation>ul.el-menu>.is-disabled i{
			color: #21b8fd;
		}
		.el-menu-item.is-disabled{
			opacity: 1;
			color: #21b8fd;
			cursor: auto;
		}

		/* 二级导航 */
		.dh_ahcn-submen .el-menu-vertical-demo .el-submenu__title{
			font-size: 16px;
		}
		.el-submenu.is-active .el-submenu__title{
			/* font-size: 16px; */
			background-color: #272727fa !important;
			color: #64b4ff;
			border-left: 3px solid #64b4ff;
		}
		.el-submenu.is-active .el-submenu__title i{
			color: #64b4ff;
		}
		/* .el-menu-item:hover{
			background-color: #64b4ff;
		} */
		.el-submenu__title{
			color: #ffffff;
			border-left: 3px solid #000000;
			box-sizing: border-box;
		}
		.el-submenu__title i{
			color: #ffffff;
		}

		/* hover */
		.dh_ahcn-submen .el-menu-item:hover,.el-submenu .el-submenu__title:hover{
			border-left: #33A2EF solid 3px !important;
			background-color: #272727fa !important;
			color: #38B2FF !important;
			box-sizing: border-box;
		}
        .el-submenu .el-submenu__title:hover i {
            color: #38B2FF;
        }
		/* .el-submenu .el-menu{
			background-color: transparent;
		} */
		/* .is-opened:hover{
			background-color: #2e2e2e;
		} */
		/* 二级菜单的选中状态 */
		.el-submenu.is-active .el-menu-item.is-active{
			background-color: #272727fa !important;
			color: #64b4ff;
			border-left: 3px solid #64b4ff;
		}

		/* 字体图标 */
		.el-menu-item i{
			color: #ffffff;
		}
		.dh_ahcn-icon{
			width: 18px;
			height: 18px;
			padding: 0 3px;
			/* font-size: 17px; */
			margin-right: 5px;
		}
		/* 数据部分，也是路由的显示区域 */
		.dh_ahc-list{
			width: 100%;
			min-height: 100%;
			/* padding: 30px; */
			background-color: #f7f7f7;
			box-sizing: border-box;
		}

/* 上传图片的样式修改，全局属性 */
/* upload上传图片的选框大小 */
.el-upload--picture-card{
  border: 1px dashed #13C3C7;
}
.el-upload--picture-card:hover {
  border-color: #13C3C7;
  color: #13C3C7;
}
.el-upload--picture-card{
  width: 100px;
  height: 100px;
  font-size: 16px !important;
}
.el-upload{
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 16px;
}
.el-upload-list--picture-card .el-upload-list__item{
  width: 100px;
  height: 100px;
  /* line-height: 100px; */
  font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
  font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail{
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 16px;
}
.avatar{
  width: 100px;
  height: 100px;
}
</style>
